@import '../../../base/sass/mixins';
@import '../../../base/sass/index';
@import '../../../base/sass/px-to-rem';
 
 body{
 	background: #ECEEF3;
 }
.list{
	width: px2rem(726px);
	margin:px2rem(18px) auto;
}
.item{
	width: 100%;
	float: left;
	margin-bottom: px2rem(42px);
	.item_left{
		width: px2rem(342px);
		height: px2rem(356px);
		float: left;
		background:#ffffff;
		box-shadow:0 px2rem(2px) px2rem(8px) 0 rgba(0,0,0,0.13);
		border-radius:px2rem(22px);
		.item_img{
			background:#f2f2f2;
			border-radius:px2rem(14px);
			text-align: center;
			width:px2rem(322px);
			height:px2rem(286px);
			margin:px2rem(10px) auto;
			img{
				width: px2rem(238px);
				height: px2rem(256px);
				margin-top: px2rem(14px);
			}
		}
		.img_wr{
			width: 100%;
			text-indent: px2rem(10px);
			font-size:px2rem(28px);
			color:#9a8efd;
			text-align:left;
		}
	}
	.item_right{
		float: left;
		width: px2rem(320px);
		margin-left:px2rem(30px);
		.grade_name{
			width: 100%;
			height: px2rem(62px);
			h2{
				font-size:px2rem(32px);
				color:#2d2d2d;
				text-align:left;
				float: left;
			}
			.now_identity{
				display: inline-block;
				float: right;
				border:px2rem(2px) solid #9a8efd;
				border-radius:px2rem(200px);
				width:px2rem(156px);
				height:px2rem(58px);
				font-size:px2rem(24px);
				color:#fff;
				line-height: px2rem(58px);
				text-align:center;
				background: #9A8EFD;
			}
		}  
        .benefit{
        	width: 100%;
        	margin-top: px2rem(6px);
        	h2,p{
				font-size:px2rem(24px);
				color:#666666;
				text-align:left;
				line-height: px2rem(28px);
				margin-bottom:px2rem(10px);
				word-break:break-all;
        	}
        }
        .upgrade{
        	width: 100%;
			font-size:px2rem(24px);
			color:#9a8efd;
			text-align:left;
			line-height: 28px;
			margin-top: px2rem(20px);
        }
	}

}
.now_item{
	.item_right .grade_name .now_identity{
		background: #ECEEF3;
		color:#9a8efd;
	}
	.item_right .upgrade{
		display: none;
	}
}